import QtQuick 2.6
import Sailfish.Silica 1.0
import "../component"
import "../config"
import com.novel.service 1.0


Page {
    id:readPage
    backNavigation: false   //禁止手势返回上一层
    //设置屏幕方向
    allowedOrientations: defaultAllowedOrientations

    signal novelContentFontChangeSignal(real amount)

    property string chapterPageCount: "1/34"
    property int contentFontSize: 50
    property int letterSpacingSize: 8

    // 声明属性接收参数
    property string novelId
    property string novelTitle

    Component.onCompleted: {
        console.log("小说id：" +novelId+",小说标题："+novelTitle)
    }


    Rectangle {
        id:pageBackRect
        anchors.fill: parent
        color: AppColor.themeMode.windowBackColor
    }


    //顶部操作栏
    DockedPanel{
        id:topDockedPanel
        width: parent.width
        height: backToHomeRow.height
        dock: Dock.Top
        open: bottomDockedPanel.open
        z:1

        //背景颜色
        Rectangle{
            anchors.fill: parent
            color: AppColor.themeMode.primaryComponentColor
        }


        //返回书架
        Row{
            id:backToHomeRow
            padding: 30
            height: children.implicitHeight
            width: parent.width
            Rectangle{
                width: 120+backToHome.contentWidth
                height: Math.max(120,backToHome.contentHeight)
                radius: width*0.1
                color: AppColor.themeMode.primaryComponentColor
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        console.log("正在返回书架！")
                        pageStack.pop(undefined, PageStackAction.Immediate)
                    }
                }

                Icon{
                    id:backToHomeIcon
                    source: "image://theme/icon-m-left"
                    width: 120
                    height: 120
                    color: AppColor.themeMode.primaryColor
                    anchors.verticalCenter: parent.verticalCenter
                }
                Text {
                    id: backToHome
                    text: qsTr("返回书架")
                    font.pixelSize: Theme.fontSizeSmall
                    anchors.left: backToHomeIcon.right
                    anchors.verticalCenter: parent.verticalCenter
                    color: AppColor.themeMode.primaryColor
                }
            }
        }

    }


    //小说内容
    PathView {
        id:pathView
        width: parent.width
        height: parent.height
        model: 3
        currentIndex: 0
        interactive: false
        snapMode: PathView.SnapOneItem

        property var array: ["“斗之力，三段！”

望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字，少年面无表情，唇角有着一抹自嘲，紧握的手掌，因为大力，而导致略微尖锐的指甲深深的刺进了掌心之中，带来一阵阵钻心的疼痛…

“萧炎，斗之力，三段！级别：低级！”测验魔石碑之旁，一位中年男子，看了一眼碑上所显示出来的信息，语气漠然的将之公布了出来…

中年男子话刚刚脱口，便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动。

“三段？嘿嘿，果然不出我所料，这个“天才”这一年又是在原地踏步！”

“哎，这废物真是把家族的脸都给丢光了。”

“要不是族长是他的父亲，这种废物，早就被驱赶出家族，任其自生自灭了，哪还有机会待在家族中白吃白喝。”

“唉，昔年那名闻乌坦城的天才少年，如今怎么落魄成这般模样了啊？”

“谁知道呢，或许做了什么亏心事，惹得神灵降怒了吧…”

周围传来的不屑嘲笑以及惋惜轻叹，落在那如木桩待在原地的少年耳中，恍如一根根利刺狠狠的扎在心脏一般，让得少年呼吸微微急促。",
            "少年缓缓抬起头来，露出一张有些清秀的稚嫩脸庞，漆黑的眸子木然的在周围那些嘲讽的同龄人身上扫过，少年嘴角的自嘲，似乎变得更加苦涩了。

“这些人，都如此刻薄势力吗？或许是因为三年前他们曾经在自己面前露出过最谦卑的笑容，所以，如今想要讨还回去吧…”苦涩的一笑，萧炎落寞的转身，安静的回到了队伍的最后一排，孤单的身影，与周围的世界，有些格格不入。

“下一个，萧媚！”

听着测验人的喊声，一名少女快的人群中跑出，少女刚刚出场，附近的议论声便是小了许多，一双双略微火热的目光，牢牢的锁定着少女的脸颊…

少女年龄不过十四左右，虽然并算不上绝色，不过那张稚气未脱的小脸，却是蕴含着淡淡的妩媚，清纯与妩媚，矛盾的集合，让得她成功的成为了全场瞩目的焦点…

少女快步上前，小手轻车熟路的触摸着漆黑的魔石碑，然后缓缓闭上眼睛…

在少女闭眼片刻之后，漆黑的魔石碑之上再次亮起了光芒…

“斗之气：七段！”

“萧媚，斗之气：七段！级别:高级！”",
            "“耶！”听着测验员所喊出的成绩，少女脸颊扬起了得意的笑容…

“啧啧，七段斗之气，真了不起，按这进度，恐怕顶多只需要三年时间，她就能称为一名真正的斗者了吧…”

“不愧是家族中种子级别的人物啊…”

听着人群中传来的一阵阵羡慕声，少女脸颊上的笑容更是多了几分，虚荣心，这是很多女孩都无法抗拒的诱·惑…

与平日里的几个姐妹互相笑谈着，萧媚的视线，忽然的透过周围的人群，停在了人群外的那一道孤单身影上…

皱眉思虑了瞬间，萧媚还是打消了过去的念头，现在的两人，已经不在同一个阶层之上，以萧炎最近几年的表现，成年后，顶多只能作为家族中的下层人员，而天赋优秀的她，则将会成为家族重点培养的强者，前途可以说是不可限量。

“唉…”莫名的轻叹了一口气，萧媚脑中忽然浮现出三年前那意气风的少年，四岁练气，十岁拥有九段斗之气，十一岁突破十段斗之气，成功凝聚斗之气旋，一跃成为家族百年之内最年轻的斗者！

当初的少年，自信而且潜力无可估量，不知让得多少少女对其春心荡漾，当然，这也包括以前的萧媚。"]

        path: Path {
            startX: -pathView.width
            startY: pathView.height/2
            PathLine {
                x: 2*pathView.width
                y:pathView.height/2
            }
        }

        preferredHighlightBegin: 0.5
        preferredHighlightEnd:  0.5

        delegate: UIBookContent {
            textSize: contentFontSize
            letterSpacing: letterSpacingSize
            pageContent: pathView.array[index]
            bottomPadding: bottomToolRow.height

        }

        MouseArea {
                anchors.fill: parent
                acceptedButtons: Qt.LeftButton
                property real startX: 0
                property real startTime: 0
                property int minDistance: 50
                property int maxTime: 300 // 最大滑动时间（毫秒）

                onPressed: {
                    startX = mouse.x
                    startTime = Date.now()
                }

                onReleased: {
                    var deltaX = mouse.x - startX
                    var elapsedTime = Date.now() - startTime
                    var width = parent.width
                    var clickRegion = Math.floor((mouse.x / width) * 3)

                    if (elapsedTime < maxTime) {
                        if (Math.abs(deltaX) > minDistance) {
                            if (deltaX > minDistance) {
                                console.log("Right swipe detected")
                                preContentPage()
                            } else {
                                console.log("Left swipe detected")
                                nextContentPage()
                            }
                        } else {
                            switch (clickRegion) {
                                case 0:
                                    preContentPage()
                                    break
                                case 1:
                                    console.log("点击菜单")
                                    extendMenuPanle.height = 0
                                    bottomDockedPanel.open = !bottomDockedPanel.open
                                    break
                                case 2:
                                    nextContentPage()
                                    break
                            }
                        }
                    }
                }
            }

    }

    //底部区域:时间 页码
    Row {
        id:bottomToolRow
        width: parent.width
        height: children.implicitHeight
        anchors.bottom: parent.bottom
        padding: 20

        //时间
        UITextClock {
            id:textClock
            backgroundColor:AppColor.themeMode.transparent
            textColor: AppColor.themeMode.thirdColor
        }

        //章节页数
        Label {
            id:chapterPageCountLabel
            width: parent.width - 2*parent.padding -textClock.width
            text: chapterPageCount
            color: AppColor.themeMode.thirdColor
            horizontalAlignment: Text.AlignRight

        }
    }

    //底部操作栏
    UIDockedPanel{
        id:bottomDockedPanel
        width: parent.width
        height: colBottom.height
        interactive: false
        dock: Dock.Bottom
        open: false


        //拦截滑动事件
        MouseArea {
            anchors.fill: parent
            onClicked: {

            }
        }


        //背景颜色
        Rectangle{
            anchors.fill: parent
            color: AppColor.themeMode.primaryComponentColor
        }


        //具体内容
        Column{
            id:colBottom
            width: parent.width
            padding: 60
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            //可隐藏的面板
            Column {
                id:extendMenuPanle
                width: parent.width - parent.padding*2
                anchors.horizontalCenter: parent.horizontalCenter
                bottomPadding: 20
                height: 0
                clip: true

                property int headerTopMaring: 40
                property int headerBottomMaring: 10

                //设置高度动画
                Behavior on height {
                    NumberAnimation {
                        duration: 300
                    }
                }

                //字号调整
                SectionHeader {
                    text: qsTr("字号")
                    color: AppColor.themeMode.thirdColor
                    font.pixelSize: Theme.fontSizeTiny
                    height: implicitHeight
                    topPadding: 0
                    bottomPadding: extendMenuPanle.headerBottomMaring
                }

                Rectangle {
                    width: parent.width
                    height: (fontSmall.height+fontLarge.height) / 2
                    radius: fontSmall.radius
                    color: AppColor.themeMode.secondaryComponentColor

                    UIRadiusLabel {
                        id: fontSmall
                        text: qsTr("-a")
                        margin: 10
                        fontBold: true
                        padding: margin
                        viewWidth: parent.width/3
                        onClicked: contentFontSize--
                    }

                    Text {
                        id:contentTextSizeText
                        width: parent/3
                        text: contentFontSize
                        font.pixelSize: Theme.fontSizeMedium
                        color: AppColor.themeMode.primaryColor
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                    }

                    UIRadiusLabel {
                        id: fontLarge
                        text: qsTr("+A")
                        margin: 10
                        fontBold: true
                        padding: margin
                        viewWidth: parent.width/3
                        anchors.right: parent.right
                        onClicked: contentFontSize++
                    }
                }

                //字间距
                SectionHeader {
                    text: qsTr("字间距")
                    color: AppColor.themeMode.thirdColor
                    font.pixelSize: Theme.fontSizeTiny
                    height: implicitHeight
                    topPadding: extendMenuPanle.headerTopMaring
                    bottomPadding: extendMenuPanle.headerBottomMaring
                }

                Rectangle {
                    width: parent.width
                    height: (fontSmall.height+fontLarge.height) / 2
                    radius: fontSmall.radius
                    color: AppColor.themeMode.secondaryComponentColor

                    UIRadiusLabel {
                        id: letterSpacingSmall
                        text: qsTr("-")
                        margin: 10
                        fontBold: true
                        padding: margin
                        viewWidth: parent.width/3
                        onClicked: letterSpacingSize--
                    }

                    Text {
                        id:letterSpacingText
                        width: parent/3
                        text: letterSpacingSize
                        font.pixelSize: Theme.fontSizeMedium
                        color: AppColor.themeMode.primaryColor
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                    }

                    UIRadiusLabel {
                        id: letterSpacingLarge
                        text: qsTr("+")
                        margin: 10
                        fontBold: true
                        padding: margin
                        viewWidth: parent.width/3
                        anchors.right: parent.right
                        onClicked: letterSpacingSize++
                    }
                }

                //阅读背景
                SectionHeader {
                    text: qsTr("阅读背景")
                    color: AppColor.themeMode.thirdColor
                    font.pixelSize: Theme.fontSizeTiny
                    height: implicitHeight
                    topPadding: extendMenuPanle.headerTopMaring
                    bottomPadding: extendMenuPanle.headerBottomMaring
                }

                Row {
                    id:readBackRow
                    width: parent.width
                    spacing: 20

                    property color checkedColor: AppColor.themeMode.windowBackColor

                    UIRadiusLabel {
                        id:defaultBackLabel
                        horizontalPadding: 40
                        verticalPadding: 20
                        backgroundColor: AppColor.themeMode.windowBackColor
                        textSize: 30
                        checked: readBackRow.checkedColor === backgroundColor
                        text: "默认"
                        onClicked: {
                            readBackRow.checkedColor = AppColor.themeMode.windowBackColor
                            pageBackRect.color = AppColor.themeMode.windowBackColor
                        }

                    }

                    UIRadiusLabel {
                        viewWidth: defaultBackLabel.width
                        viewHeight: defaultBackLabel.height
                        backgroundColor: "#ecdab7"
                        checked: readBackRow.checkedColor === backgroundColor
                        onClicked: {
                            readBackRow.checkedColor = "#ecdab7"
                            pageBackRect.color = "#ecdab7"
                        }
                    }

                    UIRadiusLabel {
                        viewWidth: defaultBackLabel.width
                        viewHeight: defaultBackLabel.height
                        backgroundColor: "#e6ddd4"
                        checked: readBackRow.checkedColor === backgroundColor
                        onClicked: {
                            readBackRow.checkedColor = "#e6ddd4"
                            pageBackRect.color = "#e6ddd4"
                        }
                    }

                    UIRadiusLabel {
                        viewWidth: defaultBackLabel.width
                        viewHeight: defaultBackLabel.height
                        backgroundColor: "#ccdbbe"
                        checked: readBackRow.checkedColor === backgroundColor
                        onClicked: {
                            readBackRow.checkedColor = "#ccdbbe"
                            pageBackRect.color = "#ccdbbe"
                        }
                    }


                }


                //翻页模式
                SectionHeader {
                    text: qsTr("翻页模式")
                    color: AppColor.themeMode.thirdColor
                    font.pixelSize: Theme.fontSizeTiny
                    height: implicitHeight
                    topPadding: extendMenuPanle.headerTopMaring
                    bottomPadding: extendMenuPanle.headerBottomMaring
                }

                Row {
                    id:paginationModeRow
                    width: parent.width
                    spacing: 20

                    property string checkedMode: leftRightMode.text

                    UIRadiusLabel {
                        id:leftRightMode
                        horizontalPadding: 40
                        verticalPadding: 20
                        backgroundColor: AppColor.themeMode.primaryComponentColor
                        textSize: 30
                        checked: paginationModeRow.checkedMode === text
                        text: "左右翻页"
                        onClicked: {
                            paginationModeRow.checkedMode = text
                        }
                    }


                    UIRadiusLabel {
                        id:scrollMode
                        horizontalPadding: 40
                        verticalPadding: 20
                        backgroundColor: AppColor.themeMode.primaryComponentColor
                        textSize: 30
                        checked: paginationModeRow.checkedMode === text
                        text: "上下滚动"
                        onClicked: {
                            paginationModeRow.checkedMode = text
                        }
                    }
                }

                //亮度
                SectionHeader {
                    text: qsTr("亮度")
                    color: AppColor.themeMode.thirdColor
                    font.pixelSize: Theme.fontSizeTiny
                    height: implicitHeight
                    topPadding: extendMenuPanle.headerTopMaring
                    bottomPadding: extendMenuPanle.headerBottomMaring
                }

                Row{
                    height: brightnessBar.height
                    width: parent.width - parent.padding*2
                    bottomPadding: 30
                    topPadding: 30

                    Text {
                        id: smallBright
                        text: qsTr("-")
                        width: (parent.width - brightnessBar.width) / 2
                        font.pixelSize: Theme.fontSizeHuge
                        anchors.verticalCenter: parent.verticalCenter
                        horizontalAlignment: Text.AlignHCenter
                        color: AppColor.themeMode.primaryColor
                        MouseArea {
                            anchors.fill: parent
                            onClicked:{
                                console.log("亮度")
                            }
                        }
                    }

                    UIProcessBar{
                        id:brightnessBar
                        width: catagrayProcessBar.width
                        height: Theme.itemSizeSmall
                        anchors.verticalCenter: parent.verticalCenter
                        horizontalPadding: 40
                        minValue: 40
                        progress: (0.9 - windowBright.opacity)/0.9
                        onProgressChanged: windowBright.opacity = 1 - (progress * 0.9 +0.1)
                    }

                    Text {
                        id: largeBright
                        text: qsTr("+")
                        width: (parent.width - catagrayProcessBar.width) / 2
                        font.pixelSize: Theme.fontSizeHuge
                        anchors.verticalCenter: parent.verticalCenter
                        horizontalAlignment: Text.AlignHCenter
                        color: AppColor.themeMode.primaryColor
                        MouseArea {
                            anchors.fill: parent
                            onClicked:{
                                console.log("亮度")
                            }
                        }
                    }
                }

            }


            //章节操作
            Row{
                height: catagrayProcessBar.height
                width: parent.width - parent.padding*2
                bottomPadding: 30
                topPadding: 30

                Text {
                    id: preCategray
                    text: qsTr("上一章")
                    font.pixelSize: Theme.fontSizeSmall
                    anchors.verticalCenter: parent.verticalCenter
                    color: AppColor.themeMode.primaryColor
                    MouseArea {
                        anchors.fill: parent
                        onClicked:{
                            pathView.currentIndex--
                            console.log("上一章节")
                        }
                    }
                }

                UIProcessBar{
                    id:catagrayProcessBar
                    width: parent.width-2*parent.padding-preCategray.contentWidth-nextCategray.contentWidth
                    height: Theme.itemSizeSmall
                    anchors.verticalCenter: parent.verticalCenter
                    horizontalPadding: 40
                }

                Text {
                    id: nextCategray
                    text: qsTr("下一章")
                    font.pixelSize: Theme.fontSizeSmall
                    anchors.verticalCenter: parent.verticalCenter
                    color: AppColor.themeMode.primaryColor
                    MouseArea {
                        anchors.fill: parent
                        onClicked:{
                            pathView.currentIndex++
                            console.log("下一章节")
                        }
                    }
                }
            }

            //按钮操作区域
            Row{
                width: parent.width - parent.padding*2
                spacing: width*0.05

                //目录按钮
                Rectangle{
                    width: parent.width*0.3
                    height: chapterIcon.implicitHeight+chapterLabel.implicitHeight
                    color: AppColor.themeMode.primaryComponentColor

                    Icon{
                        id:chapterIcon
                        source: "image://theme/icon-m-menu"
                        color: AppColor.themeMode.primaryColor
                        anchors {
                            top: parent.top
                            bottom: chapterLabel.top
                            horizontalCenter: parent.horizontalCenter
                        }
                    }

                    Label {
                        id:chapterLabel
                        text: qsTr("目录")
                        font.pixelSize: Theme.fontSizeSmall
                        anchors.horizontalCenter: parent.horizontalCenter
                        color: AppColor.themeMode.primaryColor
                        anchors {
                            bottom: parent.bottom
                            horizontalCenter: parent.horizontalCenter
                        }
                    }

                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            bottomDockedPanel.hide()
                            extendMenuPanle.height = 0
                            chapterDockedPanel.show()
                        }
                    }
                }


                //浅暗模式
                Rectangle{
                    height: lightIcon.height+lightLabel.implicitHeight
                    width: parent.width*0.3
                    color: AppColor.themeMode.primaryComponentColor

                    Icon{
                        id:lightIcon
                        width: Theme.iconSizeMedium
                        height: Theme.iconSizeMedium
                        source: AppColor.themeModeIndex===0?"../img/icon_theme_light.svg":AppColor.themeModeIndex===1?"../img/icon_theme_dark.svg":"image://theme/icon-m-jolla"
                        color: AppColor.themeMode.primaryColor
                        anchors {
                            top: parent.top
                            bottom: lightLabel.top
                            horizontalCenter: parent.horizontalCenter
                        }
                    }

                    Label {
                        id: lightLabel
                        text: AppColor.themeModeIndex===0?qsTr("浅色"):AppColor.themeModeIndex===1?qsTr("深色"):qsTr("Silica")
                        font.pixelSize: Theme.fontSizeSmall
                        anchors.horizontalCenter: parent.horizontalCenter
                        color: AppColor.themeMode.primaryColor
                        anchors {
                            bottom: parent.bottom
                            horizontalCenter: parent.horizontalCenter
                        }
                    }

                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            var index = AppColor.themeModeIndex + 1
                            AppColor.changeThemeMode(index%3)
                        }
                    }

                }


                //设置按钮
                Rectangle{
                    height: settingIcon.implicitHeight+settingLabel.implicitHeight
                    width: parent.width*0.3
                    color: AppColor.themeMode.primaryComponentColor
                    Icon{
                        id:settingIcon
                        source: "image://theme/icon-m-setting"
                        color: extendMenuPanle.height===0?AppColor.themeMode.primaryColor:AppColor.themeMode.themeColor
                        anchors {
                            top: parent.top
                            bottom: settingLabel.top
                            horizontalCenter: parent.horizontalCenter
                        }
                    }

                    Label {
                        id: settingLabel
                        text: qsTr("设置")
                        font.pixelSize: Theme.fontSizeSmall
                        color: extendMenuPanle.height===0?AppColor.themeMode.primaryColor:AppColor.themeMode.themeColor
                        anchors {
                            bottom: parent.bottom
                            horizontalCenter: parent.horizontalCenter
                        }
                    }

                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            extendMenuPanle.height = extendMenuPanle.height===0?extendMenuPanle.children.implicitHeight:0
                        }
                    }
                }


            }
        }

    }

    //侧边目录
    UIDockedPanel{
        id:chapterDockedPanel
        height: parent.height
        width: parent.width
        dock: Dock.Left
        modal:true
        dragEnable: true

        //模拟章节数据
        Rectangle{
            id:leftPanel
            width: parent.width
            height: parent.height
            color: AppColor.themeMode.primaryComponentColor

            SilicaFlickable{
                id:catagrayScroll
                width: parent.width
                height: parent.height
                contentHeight: catagrayCol.height
                clip: true

                VerticalScrollDecorator {}

                Column{
                    id:catagrayCol
                    width: parent.width
                    padding: 30

                    Repeater{
                        model: novelService.getChaptersByNovelId(novelId);

                        delegate: Text {
                            text: modelData.title
                            font.pixelSize: Theme.fontSizeMedium
                            color: AppColor.themeMode.secondaryColor
                            padding: 20
                        }
                    }
                }

            }
        }

    }

    //上一页函数
    function preContentPage(){
        if(bottomDockedPanel.open){
            bottomDockedPanel.hide()
            extendMenuPanle.height = 0
        }else if(!chapterDockedPanel.open){
            console.log("上一页")
            pathView.currentIndex--
        }
    }

    //下一页函数
    function nextContentPage(){
        if(bottomDockedPanel.open){
            bottomDockedPanel.hide()
            extendMenuPanle.height = 0
        }else if(!chapterDockedPanel.open){
            console.log("下一页")
            pathView.currentIndex++
        }
    }
}
